<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
}
</route>
<template>
  <view>
    <wd-navbar title="首页" fixed placeholder safeAreaInsetTop></wd-navbar>

    <view class="card-shadow px-1">
      <view>
        <wd-row style="height: 100rpx">
          <wd-col :span="12">
            <view class="main-card card-shadow" @click="handleMainCard">初次来访</view>
          </wd-col>
          <wd-col :span="12">
            <wd-row>
              <wd-col :span="12">
                <view class="min-card card-shadow" @click="handleSelfEvaluation">自我评测</view>
              </wd-col>
              <wd-col :span="12">
                <view class="min-card card-shadow" @click="handleConsultRecord">咨询记录</view>
              </wd-col>
            </wd-row>
            <wd-row>
              <wd-col :span="12">
                <view class="min-card card-shadow" @click="handleVideoConsult">视频咨询</view>
              </wd-col>
              <wd-col :span="12">
                <view class="min-card card-shadow" @click="handleGroupConsult">团体咨询</view>
              </wd-col>
            </wd-row>
          </wd-col>
        </wd-row>
      </view>

      <view class="card-shadow">
        <wd-swiper
          :list="swiperList"
          autoplay
          :current="1"
          :indicator="{ type: 'dots-bar' }"
          @click="handleClick"
          @change="onChange"
        ></wd-swiper>
      </view>
    </view>

    <view class="mt-2 card-shadow">
      <view class="sticky top-20 z-10 px-1" v-for="(item, index) in workList" :key="index">
        <ConsultSteps
          :activeStep="item.flowId"
          :consultationTime="item.startTime + ' - ' + item.endTime"
        />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { getWorkList } from '@/api/work'
import { useUserStore } from '@/store'
import { parseISO, format } from 'date-fns'

interface WorkItem {
  id: number
  flowId: number
  startTime: string
  endTime: string
}

const userStore = useUserStore()
const workList = ref<WorkItem[]>([])

const swiperList = ref([
  'https://unpkg.com/wot-design-uni-assets/redpanda.jpg',
  'https://unpkg.com/wot-design-uni-assets/capybara.jpg',
  'https://unpkg.com/wot-design-uni-assets/panda.jpg',
  'https://img.yzcdn.cn/vant/cat.jpeg',
  'https://unpkg.com/wot-design-uni-assets/meng.jpg',
])
function handleClick(e) {
  console.log(e)
}
function onChange(e) {
  // console.log(e)
}

const getWorks = () => {
  getWorkList({ openid: userStore.userInfo.openid }).then((res) => {
    console.log(res)
    workList.value = res.data as any[]
    workList.value.forEach((item) => {
      item.flowId = item.flowId - 1

      item.startTime = format(parseISO(item.startTime), 'yyyy-MM-dd HH:mm')
      item.endTime = format(parseISO(item.endTime), 'HH:mm')
    })
  })
}

onShow(() => {
  getWorks()
})

const handleMainCard = (e) => {
  console.log('handleMainCard')
}

const handleSelfEvaluation = (e) => {
  uni.navigateTo({ url: '/pages/survey/select' })
  console.log('handleSelfEvaluation')
}

const handleConsultRecord = (e) => {
  uni.navigateTo({ url: '/pages/history/consultations' })
  console.log('handleConsultRecord')
}

const handleVideoConsult = (e) => {
  uni.navigateTo({ url: '/pages/normal/remoteConsult' })
  console.log('handleVideoConsult')
}

const handleGroupConsult = (e) => {
  uni.navigateTo({ url: '/pages/normal/groupConsult' })
  console.log('handleGroupConsult')
}
</script>

<style>
.main-title-color {
  color: #d14328;
}

.main-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300rpx;
  margin-bottom: 10rpx;
  font-size: 50rpx;
  color: #000;
  /* background-color: rgb(85 206 159); */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='400' height='400' preserveAspectRatio='none' viewBox='0 0 400 400'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1075%26quot%3b)' fill='none'%3e%3crect width='400' height='400' x='0' y='0' fill='rgba(85%2c 206%2c 159%2c 1)'%3e%3c/rect%3e%3cpath d='M21 194L159 56' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient1076%26quot%3b)' stroke-linecap='round' class='TopRight'%3e%3c/path%3e%3cpath d='M196 227L367 56' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1076%26quot%3b)' stroke-linecap='round' class='TopRight'%3e%3c/path%3e%3cpath d='M291 93L544 -160' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient1077%26quot%3b)' stroke-linecap='round' class='BottomLeft'%3e%3c/path%3e%3cpath d='M242 42L63 221' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1077%26quot%3b)' stroke-linecap='round' class='BottomLeft'%3e%3c/path%3e%3cpath d='M217 346L93 470' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1076%26quot%3b)' stroke-linecap='round' class='TopRight'%3e%3c/path%3e%3cpath d='M388 62L538 -88' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1077%26quot%3b)' stroke-linecap='round' class='BottomLeft'%3e%3c/path%3e%3cpath d='M368 373L146 595' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient1077%26quot%3b)' stroke-linecap='round' class='BottomLeft'%3e%3c/path%3e%3cpath d='M337 125L502 -40' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient1077%26quot%3b)' stroke-linecap='round' class='BottomLeft'%3e%3c/path%3e%3cpath d='M246 222L-3 471' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1076%26quot%3b)' stroke-linecap='round' class='TopRight'%3e%3c/path%3e%3cpath d='M162 387L-81 630' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1077%26quot%3b)' stroke-linecap='round' class='BottomLeft'%3e%3c/path%3e%3cpath d='M252 277L543 -14' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1077%26quot%3b)' stroke-linecap='round' class='BottomLeft'%3e%3c/path%3e%3cpath d='M154 374L1 527' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1076%26quot%3b)' stroke-linecap='round' class='TopRight'%3e%3c/path%3e%3cpath d='M292 278L428 142' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1077%26quot%3b)' stroke-linecap='round' class='BottomLeft'%3e%3c/path%3e%3cpath d='M309 126L197 238' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient1077%26quot%3b)' stroke-linecap='round' class='BottomLeft'%3e%3c/path%3e%3cpath d='M109 169L-95 373' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1076%26quot%3b)' stroke-linecap='round' class='TopRight'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1075'%3e%3crect width='400' height='400' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='0%25' y1='100%25' x2='100%25' y2='0%25' id='SvgjsLinearGradient1076'%3e%3cstop stop-color='rgba(220%2c 237%2c 255%2c 0)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(220%2c 237%2c 255%2c 0.58)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='100%25' y1='0%25' x2='0%25' y2='100%25' id='SvgjsLinearGradient1077'%3e%3cstop stop-color='rgba(220%2c 237%2c 255%2c 0)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(220%2c 237%2c 255%2c 0.58)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
  background-size: contain;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}

.min-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 145rpx;
  margin-bottom: 10rpx;
  margin-left: 10rpx;
  font-size: 30rpx;
  color: #000;
  background-color: rgb(90 198 212);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='400' height='400' preserveAspectRatio='none' viewBox='0 0 400 400'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1033%26quot%3b)' fill='none'%3e%3crect width='400' height='400' x='0' y='0' fill='rgba(90%2c 198%2c 212%2c 1)'%3e%3c/rect%3e%3cpath d='M 0%2c94 C 16%2c95.4 48%2c105.8 80%2c101 C 112%2c96.2 128%2c63.4 160%2c70 C 192%2c76.6 208%2c141.2 240%2c134 C 272%2c126.8 288%2c39.6 320%2c34 C 352%2c28.4 384%2c91.6 400%2c106L400 400L0 400z' fill='rgba(233%2c 244%2c 255%2c 1)'%3e%3c/path%3e%3cpath d='M 0%2c238 C 40%2c255.8 120%2c332 200%2c327 C 280%2c322 360%2c235.8 400%2c213L400 400L0 400z' fill='rgba(80%2c 99%2c 121%2c 1)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1033'%3e%3crect width='400' height='400' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
  background-size: contain;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}

.card-shadow {
  border-radius: 32rpx;
  box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
  transition: box-shadow 0.3s ease-in-out;
}

.card-shadow:hover {
  box-shadow: 0 6px 12px rgb(0 0 0 / 15%);
}

.wd-drop-menu:not(:last-child) {
  margin-right: 32rpx;
  /* 或者你想要的任何间隔大小 */
}
</style>
